import React from 'react'
import { useLocation, useParams } from 'react-router-dom'
import qs from 'qs'

export default function List() {
    /* 
    路由传参:useLocation
        useLocation:可以获取当前的路由地址信息
        - path：当前的路由地址
        - search：查询字符串形式的路由传参
        - state: 在编程式路由导航的位置传入state参数
    */
    const location=useLocation()
    const {user}=qs.parse(location.search.split('?')[1])
    // 接收Home经过state传过来的参数
    // 接收过来之后,在下方渲染
    const state=location.state

    // useParams获取路径id
    const {id} = useParams()
    return (
        <div>
            <div>Music</div>
            <p>歌手是{ user },编号为{ id }</p>
            <ul>
                {
                    state.map(item=>{
                        return <li key={item.id}>{item.name}</li>
                    })
                }
            </ul>
        </div>
    )
}
